<template>
    <div class="home">
      <div class="container">
        <h1 class="title">超市流水管理系统用户信息采集</h1>
        
        <div ref="lineChart" class="zhexian"></div>
        <div ref="pieChart" class="shanxing"></div>
        <div>周客流量情况</div>
        <div class="xuanchuan">超市宣传策略</div>
        
      </div>
      
    </div>
    
</template>
  
<script>
import * as echarts from 'echarts';
import { defineComponent,onMounted, ref } from 'vue';

export default defineComponent ({
  setup() {
    const lineChart = ref(null);
    const pieChart = ref(null);
    onMounted(() => {
      let chart = echarts.init(lineChart.value);
      let chart1 = echarts.init(pieChart.value);

      chart.setOption({
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
        }]
      });
      
      chart1.setOption({
        series : [
          {
            name: '访问来源',
            type: 'pie',
            radius: '55%',
            data:[
              {value:235, name:'视频广告'},
              {value:274, name:'联盟广告'},
              {value:310, name:'邮件营销'},
              {value:335, name:'直接访问'},
              {value:400, name:'搜索引擎'}
            ]
          }
        ]
      });
    });
    return {
      lineChart,
      pieChart
    }
  }
})

</script>
  
  <style lang="less" scoped>
  .home {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, #a8edea 0%, #fed6e3 100%);
    background-size: 100% 100%;
  
    .container {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding-top: 100px;
      background-color: rgba(0, 0, 0, 0.7);
      text-align: center;
      color: #fff;
  
      .title {
        font-size: 30px;
      }
      .shanxing{ 
      margin: -350px 0 0 800px;;
      width: 600px;
      height: 300px;
      }
     .zhexian{
      margin: 100px 200px 0 200px;
      width: 600px;
      height: 400px;
      }
      .xuanchuan{
        margin-left: 1000px;
      }
     
    }
  }
  </style>
  